<template>
	<view class="content">
	

		<view class="list flex flex-col justify-start items-center">
		
			<view class="grb flex flex-col w100 justify-center items-center">
			
				<view class="flex flex-col artice_list w100">
					<view class="items flex flex-row justify-between items-center" v-for="(item,index) in article" @tap="gomenu('/pages/detail/detail?id='+item.id)">
						<image class="a-img" :src="item.image" mode=""></image>
						<view class="info flex flex-col items-start justify-start">
							<view class="title f_32 c_3d">{{item.title}}</view>
							<view class="title f_28 c_6d">{{item.description}}</view>
							<view class="flex flex-row justify-between items-center w100">
								<text class="f_24 c_9d">{{$util.timeStampTurnTimeDay(item.createtime)}}</text>
								<image class="read" src="../../static/image/readicon@2x.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="article.length==0">
					<u-empty
					        mode="search"
							text='暂无数据'
					>
					</u-empty>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import http from 'common/js/http.js';

	export default {
		mixins: [http],
		data() {
			return {
				category_id:'',
				article: [
					
				],
				interval: 2000,
				list: [{
						poster: '../../static/image/banner@2x.png',

					},


					{
						poster: '../../static/image/banner@2x.png',

					},
					{
						poster: '../../static/image/banner@2x.png',

					},

				],
				menu: [{
						poster: '../../static/image/cunwugongkaiicon@2x.png',
						text: '村务公开',
						linkurl: '/pages/cwgk/cwgk'

					},


					{
						poster: '../../static/image/zhengminhudongicon@2x.png',
						text: '政民互动',

						linkurl: '/pages/cwgk/hd'
					},
					{
						poster: '../../static/image/bianminfuwuicon@2x.png',

						text: '便民服务',

						linkurl: '/pages/cwgk/fw'
					},
					{
						poster: '../../static/image/zhengcezixunicon@2x.png',

						text: '政策咨询',

						linkurl: '/pages/cwgk/zx'
					},
					{
						poster: '../../static/image/yishixieshangicon@2x.png',

						text: '议事协商',

						linkurl: '/pages/cwgk/ys'
					},
					{
						poster: '../../static/image/zhiyuanfuwuicon@2x.png',

						text: '志愿服务',
						linkurl: '/pages/zyzfu/zyzfu'
					}
				],
				keywords: '',
				city: '',
				rangeArr: [{
					text: '建湖县',
					value: 0

				}],
				notice:''
			}
		},
		onLoad(data) {
			if(data.id){
				this.category_id = data.id
				this.getname(data.id)
			}
			this.getnotice()
		},
		methods: {
			getname(id){
				this.sendRequest({
					url:'cun/detail',
					data:{id:id},
					success:res=>{
						uni.setNavigationBarTitle({
							title:res.data.name
						})
					}
				})
			},
			search(e){
				console.log(e)
				this.getnotice(e.detail.value)
			},
			getnotice(){
				this.sendRequest({
					url: 'cun/articlelist',
					data: {
						town_id: 1,
						category_id:this.category_id
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
				
							this.article = res.data
						}
					}
				})
			},
			getbanner(){
				this.sendRequest({
					url: 'cun/block',
					data: {
						town_id: 1
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
				
							this.list = res.data
						}
					}
				})
			},
			getgrb(){
				this.sendRequest({
					url: 'cun/getIndexArticle',
					data: {
						town_id: 1
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
				
							this.article = res.data
						}
					}
				})
			},
			gomenu(url) {
				uni.navigateTo({
					url: url
				})
			},
			getmenu() {
				this.sendRequest({
					url: 'cun/index',
					data: {
						pid: 0,
						town_id: 1,
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {

							this.menu = res.data
						}
					}
				})
			},

			/* 预览照片 */
			previewPhoto(e) {
				let index = e.currentTarget.dataset.index;
				let list = this.list.map((item, index) => {
					return item.poster;
				});

				uni.previewImage({
					current: list[index],
					urls: list,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(res) {

							uni.getImageInfo({
								src: list[res.index],
								success: function(image) {
									console.log('图片信息：', JSON.stringify(image));
									uni.saveImageToPhotosAlbum({
										filePath: image.path,
										success: function() {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none',
												duration: 3000
											});
										}
									});
								}
							});
						}
					}
				});
			},


			bindPickerChange(e) {
				console.log(e.detail.value)
				this.city = this.rangeArr[e.detail.value].text

			}
		}
	}
</script>

<style lang="scss">
	.artice_list {
		padding: 20rpx 35rpx;

		.items {
			margin-bottom: 30rpx;
		}

		.a-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}

		.read {
			width: 76rpx;
		}

		.info {
			width: 500rpx;

			.title {
				width: 100%;
				margin-bottom: 5rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.grb {
		margin-top: 20rpx;
	}

	.grb-img {
		width: 200rpx;
	}

	page {
		background: #fff;
	}

	.menu {
		margin-top: 40rpx;

		.menu-item {
			width: 33.3%;
			margin: 20rpx 0;

			.menu-icon {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.banner {
		border-radius: 10rpx;
	}

	wx-swiper .wx-swiper-dot {

		background: rgba(0, 0, 0, 0.1) !important;
		border: 1rpx solid #fff;
	}

	wx-swiper .wx-swiper-dot-active {

		background: #fff !important;
	}

	// 	 .uni-swiper-dot {
	// 			// 指示点元素默认样式
	// 			width: 9rpx !important;
	// 			height: 9upx !important;
	// 			background: #C0C0C0 !important;
	// 			border: 1rpx solid #fff;
	// 		}

	// 	 .uni-swiper-dot-active {
	// 			// 指示点元素激活（当前选中）状态样式
	// 			width: 32rpx !important;
	// 			height: 8rpx !important;
	// 			background: #fff !important;
	// 			border-radius: 4rpx;
	// 		}
	.topView {
		margin-top: 0;
		margin-left: 0;
		width: 100%;
		height: 384rpx;
	}

	.list {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.gonggao {
			box-sizing: border-box;
			padding: 0 16rpx;
			padding-top: 10rpx;
			width: 100%;
			height: 54px;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 0 0 8rpx 8rpx;

			text {
				width: 550rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.item {
			position: relative;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;

			.name {
				width: 100%;
				height: 100%;
				padding-left: 32rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: 0;
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_1 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(2, 86, 255, 0.8) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_2 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(14, 152, 105, 0.8) 0%, rgba(14, 152, 105, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_3 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 188, 2, 0.8) 0%, rgba(255, 188, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_4 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 2, 2, 0.8) 0%, rgba(255, 2, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}
		}

		.i_img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.i_img1 {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}


	}


	.top {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		padding: 20rpx 32rpx;
	}

	.search {
		width: 100%;
		height: 72rpx;
		background: #F9F9F9;
		border-radius: 56rpx;
		opacity: 1;
		border: 1rpx solid #E6E6E6;
		padding: 0 10rpx;
		box-sizing: border-box;

		input {
			background: none;
			border: none;
			margin-left: 10rpx;
			width: 400rpx;
		}
	}
</style>